<template>
  <el-card shadow="never" :body-style="{ height: 'calc(100%)' }">
    <basic />
    <el-divider />
    <legalPerson />
    <el-divider />
    <contacts />
    <el-divider />
    <certification />
    <Motion :delay="300">
      <div class="w-full flex justify-end items-center gap-x-2">
        <el-button size="large"> 取消 </el-button>
        <el-button size="large" type="primary" @click="submit">
          提交审核
        </el-button>
      </div>
    </Motion>
    <submitDialog :visible="visible" @closeDialog="visible = false" />
  </el-card>
</template>

<script setup lang="ts">
import Basic from "./components/basic.vue";
import LegalPerson from "./components/legalPerson.vue";
import Contacts from "./components/contacts.vue";
import Certification from "./components/certification.vue";
import SubmitDialog from "./components/submitDialog.vue";
import { ref, defineOptions } from "vue";
defineOptions({
  name: "ApplicationForm"
});
const visible = ref(false);
const submit = () => {
  visible.value = true;
};
</script>

<style scoped lang="scss">
:deep(.el-tabs__nav-wrap)::after {
  height: 1px;
}

:deep(.el-tabs__nav-next),
:deep(.el-tabs__nav-prev) {
  font-size: 16px;
  color: var(--el-text-color-primary);
}

:deep(.el-tabs__nav-next.is-disabled),
:deep(.el-tabs__nav-prev.is-disabled) {
  opacity: 0.5;
}
</style>
